<template>
    <n-scrollbar :style="{ maxHeight: height }">
        <n-space vertical :size="32">
            <n-card title="平台总览" :style="{ width: '100%' }">
                <n-space vertical :size="32">
                    <div class="echarts-box">
                        <div id="echarts-div" :style="{ width: '100%', height: '450px' }"></div>
                    </div>
                    <n-grid x-gap="12" y-gap="48" :cols="6" v-if="init" item-responsive :style="{ width: '100%' }">
                        <n-gi span="6 800:3 1366:2">
                            <n-tooltip placement="top-start" trigger="hover">
                                <template #trigger>
                                    <n-statistic label="商家统计">
                                        <span :style="{ fontSize: '14px' }">共</span>
                                        {{ summ.merchant.now.count }}
                                        <span :style="{ fontSize: '14px' }">个</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        {{ summ.merchant.now.clks }}
                                        <span :style="{ fontSize: '14px' }">人</span>
                                    </n-statistic>
                                </template>
                                共计商家 {{ summ.merchant.now.count }} 家，共 {{ summ.merchant.now.clks }} 人
                            </n-tooltip>
                        </n-gi>
                        <n-gi span="6 800:3 1366:2">
                            <n-tooltip placement="top-start" trigger="hover">
                                <template #trigger>
                                    <n-statistic label="会员统计">
                                        <span :style="{ fontSize: '14px' }">共</span>
                                        {{ summ.member.now.total }}
                                        <span :style="{ fontSize: '14px' }">人</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">今日新增</span>
                                        {{ summ.member.now.new }}
                                        <span :style="{ fontSize: '14px' }">人</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">复购率</span>
                                        {{ summ.member.now.rate }}%
                                    </n-statistic>
                                </template>
                                共计会员 {{ summ.member.now.total }} 人，今日新增 {{ summ.member.now.new }} 人，{{ summ.member.now.rate }}% 复购率
                            </n-tooltip>
                        </n-gi>
                        <n-gi span="6 800:3 1366:2">
                            <n-tooltip placement="top-start" trigger="hover">
                                <template #trigger>
                                    <n-statistic label="车辆统计">
                                        <span :style="{ fontSize: '14px' }">共</span>
                                        {{ summ.car.now.total }}
                                        <span :style="{ fontSize: '14px' }">辆</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">上架</span>
                                        {{ summ.car.now.up }}
                                        <span :style="{ fontSize: '14px' }">辆</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">下架</span>
                                        {{ summ.car.now.down }}
                                        <span :style="{ fontSize: '14px' }">辆</span>
                                    </n-statistic>
                                </template>
                                共计会员 {{ summ.car.now.total }} 辆车，上架 {{ summ.car.now.up }} 辆车，下架 {{ summ.car.now.down }} 辆车
                            </n-tooltip>
                        </n-gi>
                        <n-gi span="6 800:3 1366:2">
                            <n-tooltip placement="top-start" trigger="hover">
                                <template #trigger>
                                    <n-statistic label="日订单统计">
                                        <span :style="{ fontSize: '14px' }">共</span>
                                        {{ summ.order.day.now.total }}
                                        <span :style="{ fontSize: '14px' }">单</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        {{ Filters.money(summ.order.day.now.oamt) }}
                                        <span :style="{ fontSize: '14px' }">元</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">平均</span>
                                        {{ Filters.money(summ.order.day.now.avg) }}
                                        <span :style="{ fontSize: '14px' }">元</span>
                                    </n-statistic>
                                </template>
                                当日订单 {{ summ.order.day.now.total }} 单，{{ Filters.money(summ.order.day.now.oamt) }} 元，平均 {{ Filters.money(summ.order.day.now.avg) }} 元
                            </n-tooltip>
                        </n-gi>
                        <n-gi span="6 800:3 1366:2">
                            <n-tooltip placement="top-start" trigger="hover">
                                <template #trigger>
                                    <n-statistic label="月订单统计">
                                        <span :style="{ fontSize: '14px' }">共</span>
                                        {{ summ.order.month.now.total }}
                                        <span :style="{ fontSize: '14px' }">单</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        {{ Filters.money(summ.order.month.now.oamt) }}
                                        <span :style="{ fontSize: '14px' }">元</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">平均</span>
                                        {{ Filters.money(summ.order.month.now.avg) }}
                                        <span :style="{ fontSize: '14px' }">元</span>
                                    </n-statistic>
                                </template>
                                近一月订单 {{ summ.order.month.now.total }} 单，{{ Filters.money(summ.order.month.now.oamt) }} 元，平均 {{ Filters.money(summ.order.month.now.avg) }} 元
                            </n-tooltip>
                        </n-gi>
                        <n-gi span="6 800:3 1366:2">
                            <n-tooltip placement="top-start" trigger="hover">
                                <template #trigger>
                                    <n-statistic label="年订单统计">
                                        <span :style="{ fontSize: '14px' }">共</span>
                                        {{ summ.order.year.now.total }}
                                        <span :style="{ fontSize: '14px' }">单</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        {{ Filters.money(summ.order.year.now.oamt) }}
                                        <span :style="{ fontSize: '14px' }">元</span>
                                        <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                        <span :style="{ fontSize: '14px' }">平均</span>
                                        {{ Filters.money(summ.order.year.now.avg) }}
                                        <span :style="{ fontSize: '14px' }">元</span>
                                    </n-statistic>
                                </template>
                                近一年订单 {{ summ.order.year.now.total }} 单，{{ Filters.money(summ.order.year.now.oamt) }} 元，平均 {{ Filters.money(summ.order.year.now.avg) }} 元
                            </n-tooltip>
                        </n-gi>
                    </n-grid>
                </n-space>
            </n-card>

            <n-card title="待办事项" :style="{ width: '100%' }" v-if="init && summ.todo.wcount + summ.todo.mch + summ.todo.car > 0">
                <n-space vertical :size="32">
                    <n-alert title="有提现申请未处理" type="info" v-if="summ.todo.wcount > 0">您有 {{ summ.todo.wcount }} 条提现申请未处理，共 {{ Filters.money(summ.todo.wtotal) }} 元</n-alert>
                    <n-alert title="有门店入驻未处理" type="info" v-if="summ.todo.mch > 0">您有 {{ summ.todo.mch }} 家门店入驻申请未处理</n-alert>
                    <n-alert title="有车辆新增未处理" type="info" v-if="summ.todo.car > 0">您有 {{ summ.todo.car }} 辆车未审核</n-alert>
                </n-space>
            </n-card>
        </n-space>
    </n-scrollbar>
</template>

<script lang="ts" setup>
import { computed, onActivated, ref } from 'vue'
import { Http, Filters } from '@/libs'
import * as echarts from 'echarts'

import { useStore } from '@/store'
const store = useStore()

const height = computed(() => store.state.browser.innerHeight - 170 + 'px')

const init = ref<boolean>(false)
const summ = ref<any>({})

const execLoadSummary = () => {
    init.value = false
    Http.post('/ops/stat/biz/plat/all/summary', {}).then(async resp => {
        if (resp.stat.err > 0) {
            return
        }
        summ.value = resp.data
        init.value = true
        initChart()
    })
}
const echart = echarts

const initChart = () => {
    let month = summ.value.recent.car.map((c: any) => c.month)
    let mchs = summ.value.recent.merchant.map((c: any) => c.count)
    let clks = summ.value.recent.clerk.map((c: any) => c.count)
    let cars = summ.value.recent.car.map((c: any) => c.count)
    let mems = summ.value.recent.member.map((c: any) => c.count)
    let orders = summ.value.recent.order.map((c: any) => c.count)
    let chart = echart.init(document.getElementById('echarts-div') as HTMLElement, (localStorage.getItem('App.Theme.Dark') || '') == 'true' ? 'dark' : '')
    // 把配置和数据放这里
    let opts: any = {
        xAxis: {
            type: 'category',
            data: month,
            boundaryGap: false,
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['门店新增', '人员新增', '车辆新增', '客户新增', '订单新增'],
        },
        grid: {
            left: '0%',
            right: '3%',
            bottom: '3%',
            containLabel: true,
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                name: '门店新增',
                data: mchs,
                type: 'line',
                stack: 'Total',
            },
            {
                name: '人员新增',
                data: clks,
                type: 'line',
                stack: 'Total',
            },
            {
                name: '车辆新增',
                data: cars,
                type: 'line',
                stack: 'Total',
            },
            {
                name: '客户新增',
                data: mems,
                type: 'line',
                stack: 'Total',
            },
            {
                name: '订单新增',
                data: orders,
                type: 'line',
                stack: 'Total',
            },
        ],
    }

    chart.setOption(opts)
    window.onresize = function () {
        //自适应大小
        chart.resize()
    }
}

onActivated(() => {
    execLoadSummary()
})
</script>
